<template>
  <div class="card">
    <div class="card-top">
      <div>{{ patient.bedName }}</div>
      <div class="base-info">
        <span>{{ patient.ptnName }}</span
        ><span>{{ patient.sex }}</span
        ><span>{{ patient.age }}岁</span>
      </div>
      <div>入院时间：{{ patient.adTime }}</div>
      <div>{{ patient.nurLevel }}</div>
    </div>
    <div class="card-bottom">
      <div>责任医生：{{ patient.docName }}</div>
      <div>责任护士：{{ patient.nurName }}</div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  patient: {
    type: Object,
    required: true,
  },
});
</script>

<style lang="scss" scoped>
.card {
  background: linear-gradient(180deg, #dfecfa 0%, #eef5fb 100%);
  border-radius: 10px;
  border: 1px solid #aad3ff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 0.7vw;
  min-height: 20vh;
  cursor: pointer;
  .card-top {
    flex: 4;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    padding: 2vh 1vw;
    .base-info {
      font-size: 1vw;
      > span {
        margin-right: 1vw;
      }
    }
  }
  .card-bottom {
    flex: 1;
    display: flex;
    > div {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(
        180deg,
        #aad3ff 0%,
        rgba(199, 239, 255, 0.17) 46%,
        #aad3ff 100%
      );
    }
    :first-child {
      border-right: 1px solid #aad3ff;
    }
  }
}
</style>
